<template>
  <a-menu id="leftMenu" v-model:openKeys="openKeys" v-model:selectedKeys="selectedKeys" mode="inline"
    style="border-right: 0px;background-color: #e5e5e5;font-size: 16px;" theme="light" :items="menuitems" @click="handleClick"></a-menu>
</template>

<script setup>
import { ipcApiRoute } from "@/api/main";
import { ipc,isEE } from "@/utils/ipcRenderer";

import { reactive, ref, watch, h } from "vue";
import {
  HomeOutlined,
   WindowsOutlined, BarsOutlined, 
   InboxOutlined,  ReadOutlined,
  SettingOutlined
} from "@ant-design/icons-vue";

import { message } from "ant-design-vue";
import { useRouter } from "vue-router";
const router = useRouter();

const selectedKeys = ref(["1"]);
const openKeys = ref([]);

function getItem(label, key, icon, children, type) {
  return {
    key,
    icon,
    children,
    label,
    type
  };
}

const menuitems = reactive([
  getItem("应用首页", "desktop", h(HomeOutlined)),

  { type: "divider" },
  getItem(
    "后端开发", "grp", null,
    [
    getItem("参数检测", "state", h(ReadOutlined)),
    getItem("窗口通信", "windows", h(WindowsOutlined)),
    getItem("数据操作", "database", h(BarsOutlined)),
    ],
    "group"),
 
  { type: "divider" },
  getItem(
    "前端开发", "grp", null,
    [
      getItem("图标示例", "icons", h(InboxOutlined)),
    ],
    "group"),
  { type: "divider" },
  getItem("设置", "setting", h(SettingOutlined)),
]);

const handleClick = (e) => {
  const routes = {
    icons: { path: '/icons' },
    desktop: { path: '/desktop' },
    state: { path: '/state' },
    setting: { path: '/help' },
    support: { name: '静态页入口', query: { page: 1, topic: 'support' } },
    database: { path: '/database' },
    windows: { name: '窗口通信', query: {} },
  };

  const route = routes[e.key];
  if ( route.path=='/help') {
    isEE ?ipc
    .invoke(ipcApiRoute.window.openSettingWindow,{ width:760,height:580, content: "#"+route.path})
    .then((ret) => {
      console.log("打开设置窗口的回调", ret);
    }): message.info("本内容为弹窗界面，请在应用端看真实效果！", 4);   
  } else{
    router.push(route); 
  }
};

watch(openKeys, (val) => {
  console.log("openKeys", val);
});


</script>

<style lang="less">

.ant-menu-root {
  margin-top: 20px;
}

.ant-menu-item-selected {
  color: #444;
}

// .ant-menu-item-group-title {text-align: center;}
.ant-menu-item-divider {
  width: 94%;
  margin-left: 3%;
}
</style>
